<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/tiles2/common.jsp" %>
<% request.setCharacterEncoding("UTF-8"); %>
<div class="page-header">
	<img class="fleft titlelogo" src="img/ext/glyphicons_043_group.png" />
	<h1>회원가입</h1>
</div>
<article >
	<div>
		<ul class="breadcrumb">
			<li><a class="btn btn-success" disabled="disabled">이용약관</a></li>
			<li><i class="icon-chevron-right"></i></li>
			<li><a class="btn btn-success" disabled="disabled">가입인증</a></li>
			<li><i class="icon-chevron-right"></i></li>
			<li><a class="btn btn-success" disabled="disabled">정보입력</a></li>
			<li><i class="icon-chevron-right"></i></li>
			<li><a class="btn" disabled="disabled">가입완료</a></li>
		</ul>
	</div>	<!-- 이동 경로 -->
	<div class="page-header">
		<h2>정보입력</h2>
		<small>회원정보는 개인정보 취급방침에 따라 안전하게 보호되며, 회원님의 명백한 동의없이 공개 또는 제 3자에게 제공되지 않습니다.</small>
	</div>	<!-- 정보입력 제목 -->
	<div>		
		<form id="joinfrm" class="well form-horizontal">
			<h3>일반회원</h3>
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="name">이름</label>
					<div class="controls">
						<input type="text" name="name" id="name" class="span2" readonly="readonly" value="${param.name2}" />
					</div>
				</div> <!-- 이름 -->
			</fieldset>
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="jumin1">주민등록번호</label>
					<div class="controls">
						<input type="text" name="jumin1" id="jumin1" class="span2" readonly="readonly" value="${param.jumin1}" />
						<input type="password" name="jumin2" id="jumin2" class="span2" readonly="readonly" value="${param.jumin1}" />
					</div>
				</div> <!-- 주민등록번호 -->
			</fieldset>
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="uid">아이디</label>
					<div class="controls">
						<input type="text" name="uid" id="uid" class="span3" maxlength="16" />
						<span id="msg1">6~16자의 영문 소문자, 숫자와 특수기호(_)만 사용할 수 있습니다.</span>
					</div>
				</div> <!-- 아이디 -->
			</fieldset>
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="pwd">비밀번호</label>
					<div class="controls">
						<input type="password" name="pwd" id="pwd" class="span2" />
					</div>
				</div> <!-- 비밀번호 -->
			</fieldset>
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="repwd">비밀번호 확인</label>
					<div class="controls">
						<input type="password" name="repwd" id="repwd" class="span2" />
						<span id="msg2">이전 항목에서 입력했던 비밀번호를 한번 더 입력하세요.</span>
					</div>
				</div> <!-- 비밀번호 확인 -->
			</fieldset>
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="zip1">우편번호</label>
					<div class="controls">
						<input type="text" name="zip1" id="zip1" class="span1" maxlength="3" readonly="readonly" />
						<i class="icon-minus"></i>
						<input type="text" name="zip2" id="zip2" class="span1" maxlength="3" readonly="readonly" />
						<a class="btn btn-inverse" data-toggle="modal" data-target="#zipcodemodal" id="zipbtn">
							<i class="icon-question-sign icon-white"></i>&nbsp;우편번호 찾기
						</a>
					</div>
				</div> <!-- 우편번호 -->
			</fieldset>
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="addr">주소</label>
					<div class="controls">
						<input type="text" name="addr" id="addr" readonly="readonly" class="span4" />
						<input type="text" name="etcaddr" id="etcaddr" class="span4" />
					</div>
				</div> <!-- 주소 -->
			</fieldset>			
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="email1">전자우편 주소</label>
					<div class="controls">
						<div class="input-append input-prepend">
							<input type="text" name="email1" id="email1" />
							<span class="add-on">@</span>
							<input type="text" name="email2" id="email2" readonly="readonly" />
						</div>
						<select id="email3" class="span2">
							<option>선택하세요</option>
							<option value="manual">직접입력</option>
							<option>gmail.com</option>
							<option>naver.com</option>
							<option>hanmail.net</option>
							<option>nate.com</option>
						</select>
					</div>
				</div> <!-- 전자우편 주소 -->
			</fieldset>
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="mp1">개인 연락처</label>
					<div class="controls">
						<select name="mp1" id="mp1" class="input-small">
							<option>국번</option>
							<option>010</option>
							<option>011</option>
							<option>016</option>
							<option>018</option>
							<option>017</option>
							<option>019</option>
						</select>
						<i class="icon-minus"></i>
						<input type="text" name="mp2" id="mp2" class="span1" />
						<i class="icon-minus"></i>
						<input type="text" name="mp3" id="mp3" class="span1" />
					</div>
				</div> <!-- 개인 연락처 -->
			</fieldset>
			<fieldset>
				<div class="control-group info">
					<label class="control-label" for="captcha">자동 가입방지</label>					
					<div class="controls">
						<img src="http://www.captcha.net/images/recaptcha-example.gif" class="captcha"><br />
						<input type="text" name="captcha" id="captcha" />
						<a class="btn btn-inverse">
							<i class="icon-question-sign icon-white"></i>&nbsp;다른 captcha보기
						</a>
					</div>
				</div> <!-- 자동 가입방지 -->
			</fieldset>
			<hr />
			<div class="tcenter">
				<a class="btn btn-primary" id="savebtn"><i class="icon-ok icon-white"></i>&nbsp;입력완료</a>
				<a class="btn btn-danger" id="cancelbtn"><i class="icon-remove icon-white"></i>&nbsp;취소하기</a>
			</div>	<!-- 버튼들 -->
			<input type="hidden" name="zipcode" id="zipcode" />
			<input type="hidden" name="email" id="email" />
			<input type="hidden" name="mp" id="mp" />
		</form>
	</div> <!-- 회원가입 -->
	<input type="hidden" id="uidcheck" value="n" />
	<input type="hidden" id="pwdcheck" value="n" />
</article>

<!-- 우편번호 찾기 모달창 시작 -->
<div class="modal hide fade" id="zipcodemodal" role="dialog">	
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h3>우편번호 찾기</h3>			
	</div>
	<div class="modal-body">
		<form class="form-horizontal" name="zipfrm">
			<div class="control-group error">
				<label class="control-label" for="dong">검색할 주소의<br />동이름을 입력하세요</label>
				<div class="controls dragdown">
					<input type="text" name="dong" id="dong" class="span3" />
					<a class="btn btn-inverse" id="findbtn">검색</a>
				</div>
			</div>
			<div class="tcenter">지역의 읍/면/동 이름을 공백없이 입력하신 후, [검색]버튼을 클릭하세요</div>
			<div class="tcenter topmargin">
				<select size="10" class="span5" id="ziplist"></select>
			</div>
		</form>
	</div>
	<div class="modal-footer">
		<a class="btn btn-danger" id="sendbtn">선택하고 닫기</a>
	</div>	
</div>
<!-- 우편번호 찾기 모달창 끝 -->

<!-- 스크립트 -->
<script>
	$("#email3").on("change", function(event){
		if ($("#email3").val()!="manual") {
			$("#email2").val($("#email3").val()).attr("readonly", "readonly");
		} else {
			$("#email2").removeAttr("readonly").val("").focus();
		}
	});
	$("#savebtn").on("click", function(event){
		if ($("#uid").val()=="") alert("아이디를 입력하세요");
		else if ($("#pwd").val()=="") alert("비밀번호를 입력하세요");
		else if ($("#uidcheck").val()=="n") alert("사용 불가능한 아이디입니다");
		else if ($("#pwdcheck").val()=="n") alert("비밀번호가 일치하지 않습니다");
		else $("#joinfrm").attr("method", "post").attr("action", "<c:url value='join/joinok.tiles' />").submit();
		
	});
	$("#cancelbtn").on("click", function(event){
		$(location).attr("href", "<c:url value='index.tiles' />");
	});
</script>
<script>
	$("#findbtn").on("click", function(event){
		$("#ziplist *").remove();
		var result = "<option>101-114 니 마음속 어딘가</option>" + "<option>101-114 니 마음속 어딘가</option>"
					+ "<option>101-114 니 마음속 어딘가</option>" + "<option>101-114 니 마음속 어딘가</option>"
					+ "<option>101-114 니 마음속 어딘가</option>" + "<option>101-114 니 마음속 어딘가</option>"
					+ "<option>101-114 니 마음속 어딘가</option>" + "<option>101-114 니 마음속 어딘가</option>"
					+ "<option>101-114 니 마음속 어딘가</option>" + "<option>101-114 니 마음속 어딘가</option>"
					+ "<option>101-114 니 마음속 어딘가</option>" + "<option>101-114 니 마음속 어딘가</option>"
					+ "<option>101-114 니 마음속 어딘가</option>" + "<option>101-114 니 마음속 어딘가</option>"
					+ "<option>101-114 니 마음속 어딘가</option>";
		$(result).appendTo("#ziplist");
	});
	$("#sendbtn").on("click", function(event){
		var zip = $("#ziplist").val().split(" ");
		$("#zip1").val(zip[0].split("-")[0]);
		$("#zip2").val(zip[0].split("-")[1]);
		$("#addr").val(zip[1]+" "+zip[2]+" "+zip[3]);
		$("#zipcodemodal").modal('hide');
	});
	$("#zipbtn").on("click", function(event){
		$("#ziplist *").remove();
	});
</script>
<script>
	$("#uid").on("blur", function(event){
		if ($("#uid").val()=='inmyheart') {
			$("#msg1").html("사용 가능한 아이디입니다.").css("color", "blue");
			$("#uidcheck").val("y");
		}
		else {
			$("#msg1").html("사용 불가능한 아이디입니다.").css("color", "red");
			$("#pwdcheck").val("n");
		}
	});
	$("#repwd").on("blur", function(event){
		if ($("#pwd").val()==$("#repwd").val()) {
			$("#msg2").html("비밀번호가 일치합니다.").css("color", "blue");
			$("#pwdcheck").val("y");
		}		
		else {
			$("#msg2").html("비밀번호가 일치하지 않습니다.").css("color", "red");
			$("#pwdcheck").val("n");
		}
	});
</script>